<!-- 普通模式演示(vue) -->
<template>
	<view class="content">
		<z-paging ref="paging" v-model="data.dataList" @query="queryList">
			<template #top>
				<view class="u-tabs-box ">
					<u-sticky bgColor="#fff">
						<u-tabs activeColor="#4787F0" :list="tabList" :current='tabIndex' @change="tabChange"
							:is-scroll="false" :activeStyle="tabActiveStyle" :itemStyle="tabItemStatusStyle"
							:inactive-style="tabInactiveStyle" lineHeight="1" lineWidth="56" lineColor="#4787F0"
							swiperWidth="750"></u-tabs>
					</u-sticky>
				</view>
				<u-search placeholder="搜索合同名称" v-model="keyword" shape="square" :showAction="false" margin="20rpx"
					@search="search" @clear="clear" height="80rpx" placeholderColor="rgba(0,0,0,0.4)"></u-search>
			</template>
			<view class="card" v-for="(item,index) in data.dataList" :key="index"
				@click="goNav(`/pages/my/toexamine/contract-review?id=${item.id}`)">
				<view class="card-header">
					<view>
						<image src="../../../static/images/root-list.png" style="vertical-align: middle;"></image>
						<text>{{ item.title }}</text>
					</view>
					<u-tag :text="item.type_name" size="mini" type="warning"></u-tag>
				</view>
				<u-line dashed></u-line>
				<view class="card-body m-t-32">
					<view class="flex" style="align-items: center;">
						<u-badge :isDot="true" type="warning" max="99"></u-badge>
						<text style="padding-left: 12rpx;color: rgba(0,0,0,0.9);">
							{{ item.status_name }}
						</text>
					</view>
					<text style="display: block;color: rgba(0,0,0,0.9);margin-top: 16rpx;">{{ item.show_name
            }}
					</text>
					<view class="flex justify-space-between">
						<text style="display: block;color: rgba(0,0,0,0.6);padding-top: 16rpx;">
							签署截止日期：{{ item.end_date }}
						</text>
						<view
							style="width: 40rpx;height: 40rpx;border: 2rpx solid rgba(0,0,0,0.2);border-radius: 40rpx;line-height: 40rpx;display: flex;align-items: center;">
							<u-icon name="arrow-rightward" color="#999999" style="margin-left: 5rpx;"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
	<Tabbar :current-page="3"></Tabbar>
</template>
<script setup>
	import {
		contractAuditList,
		contractUserList
	} from "../../../api/module/contract.js"
	import {
		reactive,
		ref
	} from 'vue'
	import {
		arrayGet,
		goNav,
		msg,
		pageUrl
	} from "../../../utils/common";
	import {
		useStore
	} from 'vuex';
	import {
		tabActiveStyle,
		tabInactiveStyle,
		tabItemStatusStyle
	} from "../../../utils/style";
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	const tabList = [{
		name: '全部',
		value: ''
	}, {
		name: '待审核',
		value: '2'
	}, {
		name: '已审核',
		value: '1'
	}, {
		name: '驳回',
		value: '3'
	}];
	const store = useStore()
	const userType = ref(1);
	const tabIndex = ref(0)
	const type = ref(1) //   1是我邀请的   2是被邀请的
	const status = ref('')
	const keyword = ref('')
	const data = reactive({
		dataList: [],
	})
	onLoad((e) => {
		if (e.type) {
			tabIndex.value = e.type
			status.value = tabList[e.type].value
		}
		userType.value = store.state.userType
		if (paging.value?.reload) {
			paging.value.reload();
		}
	})
	const paging = ref(null)
	const tabChange = (info) => {
		tabIndex.value = info.index;
		status.value = info.value
		paging.value.reload();
	}
	const search = () => {
		paging.value.reload();
	}
	const clear = () => {
		keyword.value = '';
		paging.value.reload();
	}
	const queryList = (pageNo, pageSize) => {
		let params = {
			page: pageNo,
			limit: pageSize,
			title: keyword.value,
			status: status.value
		}
		contractAuditList(params).then(res => {
			paging.value.complete(res.data)
		})
	}
</script>
<style scoped lang="scss" src="/static/css/contract/contractList.scss"></style>